@font-face {
  font-family: "Crimson";
  src: url("font/crimson-roman.woff") format("woff");
}
@font-face {
  font-family: "Crimson";
  src: url("font/crimson-italic.woff") format("woff");
  font-style: italic;
}
@font-face {
  font-family: "Crimson";
  src: url("font/crimson-semibold.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "Crimson";
  src: url("font/crimson-semibolditalic.woff") format("woff");
  font-style: italic;
  font-weight: 600;
}
@font-face {
  font-family: "Crimson";
  src: url("font/crimson-bold.woff") format("woff");
  font-weight: bold;
}
@font-face {
  font-family: "Crimson";
  src: url("font/crimson-bolditalic.woff") format("woff");
  font-style: italic;
  font-weight: bold;
}
body, h1, h2, h3, h4, p, blockquote, code, ul, ol, dl, dd, img {
  margin: 0;
}

img {
  outline: none;
}

img.arrow {
  width: auto;
  height: 11px;
}

img.dot {
  width: auto;
  height: 18px;
  vertical-align: text-bottom;
}

body {
  color: #222;
  font: normal 16px/24px "Crimson", Georgia, serif;
}

.sign-up {
  padding: 12px;
  margin: 24px 0 24px 0;
  background: #fcf6e8;
  color: #bf9540;
  border-radius: 3px;
}
.sign-up form {
  display: flex;
}
.sign-up input {
  padding: 4px;
  font: 16px "Source Sans Pro", sans-serif;
  outline: none;
  border-radius: 3px;
  border: solid 2px #ffd580;
  color: #825e17;
  height: 32px;
}
.sign-up input.email {
  display: block;
  box-sizing: border-box;
  width: 100%;
}
.sign-up input.button {
  margin-left: 8px;
  padding: 4px 8px;
  font: 600 13px "Source Sans Pro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #ffbb33;
  border: none;
  transition: background-color 0.2s ease;
}
.sign-up input.button:hover {
  background: #ffd580;
}
.sign-up input:focus {
  border-color: #ffaa00;
}

body, h1, h2, h3, h4, p, blockquote, code, ul, ol, dl, dd, img {
  margin: 0;
}

body {
  background: #29313d url("image/background.png") top center/100% auto no-repeat;
  color: #222;
  font: normal 16px/24px "Crimson", Georgia, serif;
}

a {
  color: #1481b8;
  text-decoration: none;
  border-bottom: solid 1px rgba(222, 233, 237, 0);
  transition: color 0.2s ease, border-color 0.4s ease;
}

a:hover {
  color: #1481b8;
  border-bottom: solid 1px #dee9ed;
}

article {
  margin: 0 auto;
  padding: 0 0 12px 0;
  max-width: 960px;
  background: #fff;
}

header {
  margin: 0 0 48px 0;
  color: #595959;
  background: #f5f3f0;
  border-bottom: solid 1px #dad8d6;
}

main {
  margin: 0 48px;
}

img.header {
  display: block;
  width: 100%;
}

img.small {
  display: none;
}

div.intro {
  display: flex;
}
div.intro blockquote {
  flex-basis: 40%;
  margin: 0 48px 0 0;
  font: italic 28px/42px "Crimson", Georgia, serif;
}
div.intro div.text {
  flex-basis: 60%;
  margin: 8px 0 24px 0;
}

p + p {
  margin-top: 24px;
}

.format {
  margin: 0 -12px 24px -12px;
  padding: 12px 12px 8px 12px;
  height: 244px;
  box-sizing: border-box;
  background: #eef4f7;
  background-size: cover;
  background-position: left;
  color: #444;
  border-radius: 3px;
  font: normal 16px/24px "Source Sans Pro", sans-serif;
}
.format h3 {
  margin: 0;
  padding: 0 0 4px 0;
  font: 600 16px/24px "Source Sans Pro", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.format p {
  margin-bottom: 8px;
}

.format.print, .format.pdf {
  background-position: right;
  text-align: right;
}

.format-info {
  display: inline-block;
  width: 384px;
  text-align: left;
}
.format-info table {
  width: 100%;
  border-collapse: collapse;
}
.format-info table td + td {
  padding-left: 5px;
}

.format.print {
  background-image: url("image/format-print.jpg");
}

.format.ebook {
  background-image: url("image/format-ebook.jpg");
}

.format.pdf {
  background-image: url("image/format-pdf.jpg");
}

.format.web {
  background-image: url("image/format-web.jpg");
}

a.action {
  display: block;
  margin: 0 0 4px 0;
  padding: 4px 0;
  text-align: center;
  border-radius: 3px;
  background: #1481b8;
  transition: background-color 0.2s ease, color 0.2s ease;
  font: 400 17px/24px "Source Sans Pro", sans-serif;
  color: white;
}
a.action small {
  font-size: 14px;
  padding: 4px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

a.action:hover {
  background-color: #2badee;
}
a.action:hover small {
  color: white;
}

h3 {
  font: italic 24px/24px "Crimson", Georgia, serif;
  margin: 12px 0;
}

img.author {
  float: left;
  width: 240px;
  margin: 0 12px 0 -12px;
  padding: 12px;
  background: #f5f3f0;
  border-radius: 3px;
}

div.author {
  vertical-align: top;
  margin: 36px 0 0 288px;
}

footer {
  position: relative;
  border-top: solid 1px #dee9ed;
  color: #7aa0b8;
  font: 400 15px "Source Sans Pro", sans-serif;
  text-align: center;
  margin: 12px 0 36px 0;
  padding-top: 48px;
}
footer a, footer a:hover {
  border: none;
}

@media only screen and (max-width: 700px) {
  main {
    margin: 0 24px;
  }

  header {
    margin-bottom: 24px;
  }

  img.big {
    display: none;
  }

  img.small {
    display: block;
  }

  div.intro {
    display: block;
  }
  div.intro blockquote {
    display: block;
    font: italic 24px/36px "Crimson", Georgia, serif;
  }
  div.intro div.text {
    display: block;
    margin: 24px 0 24px 0;
  }

  .format {
    margin-bottom: 12px;
    height: auto;
    background-blend-mode: lighten;
  }

  .format-info {
    display: block;
    width: 100%;
  }

  .format.print {
    background-color: #a6a29f;
  }

  .format.ebook {
    background-color: #97a2aa;
  }

  .format.pdf {
    background-color: #cfccca;
  }

  .format.web {
    background-color: #d6dbd3;
  }

  img.author {
    float: none;
  }

  div.author {
    margin: 0 0 0 0;
  }
}